<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" value="IE=9">
	<title>Debugger Sandbox For CommentCoreLibrary</title>
	<link rel="stylesheet" href="default.css" />

	<!-- CCL -->
	<link rel="stylesheet" href="../dist/css/style.css" />
	<style>
		/* for test comment with className property only */
		.blue-background {
			background: blue;
		}
	</style>
	<script type="text/javascript" src="../dist/CommentCoreLibrary.js"></script>
	<!-- Base -->
	<script src="debugger.js"></script>
	<!-- Extensions -->
</head>
<body>
<div id="debugger">
	<div id="debugger-head">
		<div id="p-main" class="button active">Main</div>
		<div id="p-code" class="button">Code</div>
		<div id="p-help" class="button">Help</div>
		<div id="pf-area">
			<div id="pf-stats">PF:OFF</div>
			<canvas id="profiler" width="300" height="40">
				<p>No canvas support. No Profiler.</p>
			</canvas>
		</div>
	</div>
	<div id="w-main" class="debugger-window" tabindex="0">
		<div class="sidebar">
			<h2>Tests</h2>
			<div>
				<a id="test-1" class="button" href="javascript:;">Run Test 1</a>
				<a id="test-2" class="button" href="javascript:;">Run Test 2</a>
				<a id="test-3" class="button" href="javascript:;">Run Test 3</a>
				<a id="test-4" class="button" href="javascript:;">Run Test 4</a>
				<a id="test-5" class="button" href="javascript:;">Run Test 5</a>
				<a id="test-6" class="button" href="javascript:;">Run Test 6</a>
				<div style="clear:both;"></div>
			</div>
			<h2>Extended</h2> 
			<div>
				<a id="test-7" class="button" href="javascript:;">Run Test 7</a> 
				<a id="test-8" class="button" href="javascript:;">Run Test 8</a> 
				<a id="test-9" class="button" href="javascript:;">Run Test 9</a>
				<a id="test-s" class="button" href="javascript:;">Run Test S</a>
				<div style="clear:both;"></div>
			</div>
			<h3>AcFun (Experimental)</h3>
			<div>
				<a id="test-ac-1" class="button" href="javascript:;">Run Test 1</a>
				<a id="test-ac-2" class="button" href="javascript:;">Run Test 2</a> 
				<div style="clear:both;"></div>
			</div>
			<h3>Live Danmaku</h3>
			<div>
				<a id="test-live-1" class="button" href="javascript:;">Add Common Danmaku</a>
				<a id="test-live-2" class="button" href="javascript:;">Add CSS Style Danmaku</a> 
				<div style="clear:both;"></div>
			</div>
			<p>TagSoup: <br>
                <a id="test-ts-1" href="javascript:;">Tag Soup 1</a>, 
                <a id="test-ts-2" href="javascript:;">Tag Soup 2</a>,
				<a id="test-ts-3" href="javascript:;">XSS</a>
			</p>
			<p>Filters: <br>
				<a id="profiler-start" href="javascript:;">Profiler</a><br>
				<a onclick="cm.filter.setRuntimeFilter(null);" href="javascript:;">Clear Runtime Filters</a>
			</p>
			<p>Scripting: <br>
				<a href="scripting">Scripting Sandbox test</a> <br>
				<a href="scripting/ccl.htm">CCL /w Scripting Enabled(Beta)</a> 
			</p>
			<p>APIs: <br>
				<a id="fs-all" href="javascript:;">Fullscreen</a> <br>
				<a id="fs-win" href="javascript:;">Windowed Fullscreen</a>
			</p>		
			<p>Links: <br>
				<a id="video-demo" href="javascript:;">Demo with video</a> <br>
				<a id="load-cmt-file" href="javascript:;">Load Custom URL</a> <br>
				<a href="../experimental/animation">CSS3 Transition Library</a> <br>
			</p>
		</div>
	
		<div id="player-unit">
			<div class="m20 abp" id="player">
				<div id="c-region" style="display:none;">640x480</div>
				<div id="commentCanvas" class="container"></div>
				<video id="abpVideo" autobuffer="true" data-setup="{}" width="100%" height="100%" style="z-index:-1;width:100%;height:100%;top:0;left:0;right:0;bottom:0;" preload="auto">
				</video>
			</div>
			<div class="controls">
				<a id="control-stop" class="button">Stop</a>
				<a id="control-resume" class="button">Resume</a>
				<div id="control-status" class="status">
					0:00:000
				</div>
				<a id="control-reset" class="button">Reset</a>
				<div id="control-resize-tb" class="button">
					&#8597; 
				</div>
				<div id="control-resize-lr" class="button" style="float:none;position:absolute;right:0;">
					&harr; 
				</div>
				<div style="clear:both;"></div>
			</div>
		</div>	
	</div>
	<div id="w-code" class="debugger-window" style="display:none;padding:30px;">
			<div style="position:absolute; right:10px; top:15px; bottom:0; width:45%">
				<h2>Debug Output</h2>
				<div id="debugger-output" class="debug-out" style="margin:10px;">
				</div>
			</div>
			<div class="iw" style="position:absolute; left:10px; top:15px; bottom:0; width:45%">
				<h2>Input Window</h2>
				<div id="debugger-input" style="padding:10px;">
					<div id="debugger-input-area"class="input" contenteditable="true">
					
					</div>
					<div id="debugger-run" class="button">Run</div>
				</div>
				<p>Filters:</p>
				<div id="preset-1-run" class="button">Filter pool = 0</div>
				<div id="preset-2-run" class="button">Niconico Clickable</div>
				<div id="preset-3-run" class="button">Debug Mode with borders</div>
			</div>
			<div style="clear:both;"></div>
	</div>
	<div id="w-help" class="debugger-window" style="display:none;padding:30px;">
			<h2>Shortcuts (快捷键)</h2>
			<p>You must first click on anywhere in the player for these to work. 如果没有生效请点击播放器窗口的任何位置。</p>
			<ul>
				<li>f - Switch time display format 切换时间制式</li>
				<li>b - Set player background to black 黑屏弹幕</li>
				<li>w - Set player background to white 白屏弹幕</li>
				<li>r - Set player width x height 设置播放器长宽</li>
				<li>p - Toggle Profiler Renderer 启动关闭 Profiler 的渲染模块</li>
				<li>[Space] - Toggle play/pause 暂停/开始</li>
			</ul>
			<h2>Debugging Tools (调试)</h2>
			<ul>
				<li>cm - Comment Core Instance 弹幕引擎实例</li>
				<li>trace(msg) - Trace messages to output 调试输出</li>
			</ul>
			<h2>Features (功能)</h2>
			<ul>
				<li>Double click the time display to set playhead time. 双击时间显示区域来设定当前播放的时间位置</li>
			</ul>
	</div>
</div>
</body>
</html>
